.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  
  .ant-card {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .ant-card-head {
      text-align: center;
      border-bottom: 1px solid #e8e8e8;
      
      .ant-card-head-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #2c3e50;
      }
    }
    
    .ant-card-extra a {
      color: #3498db;
      transition: color 0.2s;
      
      &:hover {
        color: #2980b9;
        text-decoration: none;
      }
    }
  }
  
  .ant-form {
    padding: 20px 0;
    
    .ant-form-item {
      margin-bottom: 18px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .ant-input,
    .ant-input-password {
      border-radius: 4px;
      padding: 8px 12px;
      transition: border 0.3s;
    }
    
    .ant-checkbox-wrapper {
      display: flex;
      justify-content: flex-end;
      margin: -8px 0 12px;
    }
    
    .ant-btn {
      width: 100%;
      height: 40px;
      font-weight: 500;
      border-radius: 4px;
      background: linear-gradient(to right, #3498db, #2c3e50);
      border: none;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
}

// 响应式调整
@media (max-width: 480px) {
  .login .ant-card {
    width: 90% !important;
    
    .ant-form-item-label {
      text-align: left;
    }
  }
}